<template>
  <div class="study-records-page">
    <div class="page-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <div class="header-left">
          <el-button @click="$router.back()" :icon="ArrowLeft" circle />
          <div class="header-info">
            <h1>学习记录</h1>
            <p>查看您的学习进度和成就</p>
          </div>
        </div>
        <div class="header-actions">
          <el-dropdown @command="handleFilter">
            <el-button :icon="Filter">
              筛选 <el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="all">全部</el-dropdown-item>
                <el-dropdown-item command="completed">已完成</el-dropdown-item>
                <el-dropdown-item command="learning">学习中</el-dropdown-item>
                <el-dropdown-item command="not-started">未开始</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown @command="handleSort">
            <el-button :icon="Sort">
              排序 <el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="lastStudyTime">最近学习</el-dropdown-item>
                <el-dropdown-item command="createTime">开始时间</el-dropdown-item>
                <el-dropdown-item command="progress">学习进度</el-dropdown-item>
                <el-dropdown-item command="studyDuration">学习时长</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 学习统计 -->
      <div class="stats-section">
        <div class="stats-grid">
          <div class="stat-card total">
            <div class="stat-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ studyStats.totalTutorials || 0 }}</div>
              <div class="stat-label">学习教程</div>
            </div>
          </div>
          
          <div class="stat-card completed">
            <div class="stat-icon">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ studyStats.completedTutorials || 0 }}</div>
              <div class="stat-label">完成教程</div>
            </div>
          </div>

          <div class="stat-card time">
            <div class="stat-icon">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ formatStudyTime(studyStats.totalStudyTime) }}</div>
              <div class="stat-label">学习时长</div>
            </div>
          </div>

          <div class="stat-card progress">
            <div class="stat-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ studyStats.averageProgress || 0 }}%</div>
              <div class="stat-label">平均进度</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 学习记录列表 -->
      <div class="records-section">
        <div class="section-header">
          <h3>学习记录</h3>
          <div class="filter-info">
            <span>{{ getFilterText() }}</span>
            <span class="total-count">共 {{ currentList.length }} 条记录</span>
          </div>
        </div>

        <div class="records-content" v-loading="loading">
          <!-- 无数据 -->
          <div class="no-data" v-if="!loading && currentList.length === 0">
            <el-empty description="暂无学习记录">
              <el-button type="primary" @click="$router.push('/tutorial')">
                开始学习
              </el-button>
            </el-empty>
          </div>

          <!-- 记录列表 -->
          <div class="records-list" v-if="currentList.length > 0">
            <div
              v-for="record in currentList"
              :key="record.id"
              class="record-item"
              @click="handleRecordClick(record)"
            >
              <!-- 教程信息 -->
              <div class="record-left">
                <div class="tutorial-image">
                  <img :src="record.tutorial?.coverImage || '/default-tutorial.jpg'" :alt="record.tutorial?.title" />
                  <div class="status-badge" :class="getStatusClass(record)">
                    {{ getStatusText(record) }}
                  </div>
                </div>
                
                <div class="tutorial-info">
                  <h4>{{ record.tutorial?.title || '教程标题' }}</h4>
                  <p>{{ record.tutorial?.summary || '教程简介' }}</p>
                  
                  <div class="tutorial-meta">
                    <el-tag size="small" :type="getDifficultyType(record.tutorial?.difficultyLevel)">
                      {{ getDifficultyText(record.tutorial?.difficultyLevel) }}
                    </el-tag>
                    <span class="category">{{ getCategoryText(record.tutorial?.category) }}</span>
                    <span class="duration">预计 {{ record.tutorial?.estimatedTime }}min</span>
                  </div>
                </div>
              </div>

              <!-- 学习进度 -->
              <div class="record-center">
                <div class="progress-section">
                  <div class="progress-header">
                    <span class="progress-label">学习进度</span>
                    <span class="progress-value">{{ record.progress }}%</span>
                  </div>
                  <el-progress 
                    :percentage="record.progress" 
                    :stroke-width="8"
                    :show-text="false"
                    :color="getProgressColor(record.progress)"
                  />
                  <div class="step-info">
                    第 {{ record.currentStep }} / {{ record.totalSteps }} 步
                  </div>
                </div>

                <div class="time-info">
                  <div class="time-item">
                    <span class="time-label">学习时长:</span>
                    <span class="time-value">{{ formatStudyTime(record.studyDuration) }}</span>
                  </div>
                  <div class="time-item">
                    <span class="time-label">最后学习:</span>
                    <span class="time-value">{{ formatDate(record.lastStudyTime) }}</span>
                  </div>
                  <div class="time-item" v-if="record.completedTime">
                    <span class="time-label">完成时间:</span>
                    <span class="time-value">{{ formatDate(record.completedTime) }}</span>
                  </div>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="record-actions">
                <template v-if="record.isCompleted">
                  <el-button type="success" :icon="Check" disabled>
                    已完成
                  </el-button>
                  <el-button @click.stop="reviewTutorial(record)" :icon="View">
                    复习
                  </el-button>
                </template>
                <template v-else>
                  <el-button 
                    type="primary" 
                    @click.stop="continueLearning(record)"
                    :icon="VideoPlay"
                  >
                    继续学习
                  </el-button>
                  <el-button @click.stop="viewTutorial(record)" :icon="View">
                    查看详情
                  </el-button>
                </template>
                
                <el-dropdown @command="handleRecordAction" trigger="click">
                  <el-button :icon="More" circle />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="{ action: 'share', record }">
                        <el-icon><Share /></el-icon> 分享
                      </el-dropdown-item>
                      <el-dropdown-item :command="{ action: 'notes', record }">
                        <el-icon><Edit /></el-icon> 学习笔记
                      </el-dropdown-item>
                      <el-dropdown-item :command="{ action: 'reset', record }" divided>
                        <el-icon><Refresh /></el-icon> 重新开始
                      </el-dropdown-item>
                      <el-dropdown-item :command="{ action: 'delete', record }">
                        <el-icon><Delete /></el-icon> 删除记录
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>

          <!-- 加载更多 -->
          <div class="load-more" v-if="hasMore && currentList.length > 0">
            <el-button @click="loadMore" :loading="loadingMore">
              加载更多
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习笔记对话框 -->
    <el-dialog v-model="showNotesDialog" title="学习笔记" width="600px">
      <div class="notes-content">
        <div class="tutorial-header">
          <img :src="selectedRecord?.tutorial?.coverImage || '/default-tutorial.jpg'" alt="" />
          <div>
            <h4>{{ selectedRecord?.tutorial?.title }}</h4>
            <p>第 {{ selectedRecord?.currentStep }} / {{ selectedRecord?.totalSteps }} 步</p>
          </div>
        </div>
        
        <el-input
          v-model="noteContent"
          type="textarea"
          :rows="8"
          placeholder="记录您的学习心得、重点知识和感悟..."
          maxlength="1000"
          show-word-limit
        />
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showNotesDialog = false">取消</el-button>
          <el-button type="primary" @click="saveNotes" :loading="savingNotes">
            保存笔记
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  ArrowLeft, Filter, Sort, ArrowDown, Document, Check, Timer, TrendCharts,
  VideoPlay, View, More, Share, Edit, Refresh, Delete
} from '@element-plus/icons-vue'
import { userStudyApi } from '@/api'
import type { UserStudy } from '@/types/common'
import { TUTORIAL_CATEGORIES, TUTORIAL_DIFFICULTY } from '@/types/common'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const loadingMore = ref(false)
const showNotesDialog = ref(false)
const savingNotes = ref(false)
const currentFilter = ref('all')
const currentSort = ref('lastStudyTime')
const currentPage = ref(1)
const pageSize = ref(20)
const hasMore = ref(true)

const studyRecords = ref<UserStudy[]>([])
const selectedRecord = ref<UserStudy | null>(null)
const noteContent = ref('')

const studyStats = reactive({
  totalTutorials: 0,
  completedTutorials: 0,
  learningTutorials: 0,
  notStartedTutorials: 0,
  totalStudyTime: 0,
  averageProgress: 0,
  completionRate: 0
})

// 过滤后的列表
const currentList = computed(() => {
  let filtered = studyRecords.value

  // 按状态筛选
  switch (currentFilter.value) {
    case 'completed':
      filtered = filtered.filter(record => record.isCompleted)
      break
    case 'learning':
      filtered = filtered.filter(record => !record.isCompleted && record.progress > 0)
      break
    case 'not-started':
      filtered = filtered.filter(record => record.progress === 0)
      break
  }

  // 排序
  filtered = [...filtered].sort((a, b) => {
    switch (currentSort.value) {
      case 'lastStudyTime':
        return new Date(b.lastStudyTime || '').getTime() - new Date(a.lastStudyTime || '').getTime()
      case 'createTime':
        return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
      case 'progress':
        return b.progress - a.progress
      case 'studyDuration':
        return b.studyDuration - a.studyDuration
      default:
        return 0
    }
  })

  return filtered
})

// 获取学习记录
const fetchStudyRecords = async (reset = false) => {
  if (reset) {
    currentPage.value = 1
    studyRecords.value = []
    hasMore.value = true
  }

  loading.value = reset
  loadingMore.value = !reset

  try {
    const response = await userStudyApi.getStudyRecords(
      currentPage.value, 
      pageSize.value, 
      currentSort.value
    )
    
    if (reset) {
      studyRecords.value = response.data.list || []
    } else {
      studyRecords.value.push(...(response.data.list || []))
    }

    hasMore.value = response.data.page < response.data.totalPages
    if (hasMore.value) {
      currentPage.value++
    }
  } catch (error: any) {
    ElMessage.error('获取学习记录失败')
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

// 获取学习统计
const fetchStudyStats = async () => {
  try {
    const response = await userStudyApi.getStudyProgress()
    
    // 确保数据存在且格式正确
    if (response.data) {
      studyStats.totalTutorials = response.data.totalTutorials || 0
      studyStats.completedTutorials = response.data.completedTutorials || 0
      studyStats.learningTutorials = response.data.learningTutorials || 0
      studyStats.notStartedTutorials = response.data.notStartedTutorials || 0
      studyStats.totalStudyTime = response.data.totalStudyTime || 0
      studyStats.averageProgress = response.data.averageProgress || 0
      studyStats.completionRate = response.data.completionRate || 0
    }
  } catch (error: any) {
    // 静默处理错误
  }
}

// 加载更多
const loadMore = () => {
  if (!hasMore.value || loadingMore.value) return
  fetchStudyRecords(false)
}

// 筛选处理
const handleFilter = (filter: string) => {
  currentFilter.value = filter
}

// 排序处理
const handleSort = (sort: string) => {
  currentSort.value = sort
  fetchStudyRecords(true)
}

// 记录点击
const handleRecordClick = (record: UserStudy) => {
  if (record.isCompleted) {
    reviewTutorial(record)
  } else {
    continueLearning(record)
  }
}

// 继续学习
const continueLearning = (record: UserStudy) => {
  router.push(`/tutorial/${record.tutorialId}/study`)
}

// 查看教程
const viewTutorial = (record: UserStudy) => {
  router.push(`/tutorial/${record.tutorialId}`)
}

// 复习教程
const reviewTutorial = (record: UserStudy) => {
  router.push(`/tutorial/${record.tutorialId}`)
}

// 记录操作
const handleRecordAction = async ({ action, record }: { action: string; record: UserStudy }) => {
  switch (action) {
    case 'share':
      await handleShare(record)
      break
    case 'notes':
      showNotes(record)
      break
    case 'reset':
      await handleReset(record)
      break
    case 'delete':
      await handleDelete(record)
      break
  }
}

// 分享
const handleShare = async (record: UserStudy) => {
  const shareText = `我正在学习《${record.tutorial?.title}》，当前进度${record.progress}%，一起来学习剪纸艺术吧！`
  const shareUrl = `${window.location.origin}/tutorial/${record.tutorialId}`
  
  try {
    if (navigator.share) {
      await navigator.share({
        title: record.tutorial?.title,
        text: shareText,
        url: shareUrl
      })
    } else {
      await navigator.clipboard.writeText(`${shareText} ${shareUrl}`)
      ElMessage.success('分享链接已复制到剪贴板')
    }
  } catch (error) {
    if (error instanceof Error && error.name !== 'AbortError') {
      ElMessage.error('分享失败')
    }
  }
}

// 显示笔记
const showNotes = (record: UserStudy) => {
  selectedRecord.value = record
  // 从本地存储加载笔记
  const key = `study_notes_${record.tutorialId}_${record.currentStep}`
  noteContent.value = localStorage.getItem(key) || ''
  showNotesDialog.value = true
}

// 保存笔记
const saveNotes = () => {
  if (!selectedRecord.value) return
  
  savingNotes.value = true
  try {
    const key = `study_notes_${selectedRecord.value.tutorialId}_${selectedRecord.value.currentStep}`
    localStorage.setItem(key, noteContent.value)
    ElMessage.success('笔记保存成功')
    showNotesDialog.value = false
  } catch (error) {
    ElMessage.error('笔记保存失败')
  } finally {
    savingNotes.value = false
  }
}

// 重新开始
const handleReset = async (record: UserStudy) => {
  try {
    await ElMessageBox.confirm(
      '确定要重新开始学习这个教程吗？当前进度将被重置。',
      '确认重置',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 重置学习记录
    await userStudyApi.saveStudyRecord({
      ...record,
      progress: 0,
      currentStep: 1,
      studyDuration: 0,
      isCompleted: false,
      completedTime: undefined,
      lastStudyTime: formatDateTime()
    })

    ElMessage.success('学习记录已重置')
    fetchStudyRecords(true)
  } catch {
    // 用户取消
  }
}

// 删除记录
const handleDelete = async (record: UserStudy) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个学习记录吗？删除后无法恢复。',
      '确认删除',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用删除API
    await userStudyApi.deleteStudyRecord(record.id)
    ElMessage.success('学习记录已删除')
    
    // 从列表中移除
    studyRecords.value = studyRecords.value.filter(item => item.id !== record.id)
    
    // 刷新统计数据
    fetchStudyStats()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 工具函数
const formatDateTime = (date: Date = new Date()) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const getFilterText = () => {
  const filterTexts = {
    all: '显示全部',
    completed: '已完成',
    learning: '学习中',
    'not-started': '未开始'
  }
  return filterTexts[currentFilter.value as keyof typeof filterTexts] || '全部'
}

const getStatusClass = (record: UserStudy) => {
  if (record.isCompleted) return 'completed'
  if (record.progress > 0) return 'learning'
  return 'not-started'
}

const getStatusText = (record: UserStudy) => {
  if (record.isCompleted) return '已完成'
  if (record.progress > 0) return '学习中'
  return '未开始'
}

const getProgressColor = (progress: number) => {
  if (progress === 100) return '#67c23a'
  if (progress >= 50) return '#409eff'
  return '#e6a23c'
}

const getDifficultyType = (level?: number) => {
  const types = { 1: 'success', 2: 'warning', 3: 'danger' }
  return types[level as keyof typeof types] || 'info'
}

const getDifficultyText = (level?: number) => {
  return TUTORIAL_DIFFICULTY[level as keyof typeof TUTORIAL_DIFFICULTY] || '未知'
}

const getCategoryText = (category?: number) => {
  return TUTORIAL_CATEGORIES[category as keyof typeof TUTORIAL_CATEGORIES] || '其他'
}

const formatStudyTime = (seconds: number = 0) => {
  if (seconds < 60) return `${seconds}秒`
  if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`
  return `${Math.floor(seconds / 3600)}小时${Math.floor((seconds % 3600) / 60)}分钟`
}

const formatDate = (dateString?: string) => {
  if (!dateString) return '--'
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) {
    return '今天'
  } else if (days === 1) {
    return '昨天'
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString('zh-CN')
  }
}

onMounted(() => {
  fetchStudyStats()
  fetchStudyRecords(true)
})
</script>

<style scoped>
.study-records-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面头部 */
.page-header {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-info h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.header-info p {
  color: #666;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 统计区域 */
.stats-section {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.stat-card:hover {
  border-color: #d32f2f;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.15);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}

.stat-card.total .stat-icon {
  background: #2196f3;
}

.stat-card.completed .stat-icon {
  background: #4caf50;
}

.stat-card.time .stat-icon {
  background: #ff9800;
}

.stat-card.progress .stat-icon {
  background: #d32f2f;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

/* 记录区域 */
.records-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.filter-info {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
}

.total-count {
  color: #999;
}

.records-content {
  padding: 24px;
}

.no-data {
  text-align: center;
  padding: 60px 20px;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-item {
  background: #f9f9f9;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 20px;
  transition: all 0.3s;
  cursor: pointer;
}

.record-item:hover {
  background: #fff;
  border-color: #2196f3;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
  transform: translateY(-2px);
}

.record-left {
  display: flex;
  gap: 16px;
  flex: 1;
}

.tutorial-image {
  position: relative;
  width: 120px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.tutorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
}

.status-badge.completed {
  background: #4caf50;
}

.status-badge.learning {
  background: #2196f3;
}

.status-badge.not-started {
  background: #999;
}

.tutorial-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tutorial-info h4 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tutorial-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}

.tutorial-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.record-center {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 200px;
}

.progress-section {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 12px;
  color: #666;
}

.progress-value {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.step-info {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 8px;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.time-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.time-label {
  color: #999;
}

.time-value {
  color: #333;
  font-weight: 500;
}

.record-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.load-more {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

/* 笔记对话框 */
.notes-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tutorial-header {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;
}

.tutorial-header img {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.tutorial-header h4 {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.tutorial-header p {
  font-size: 12px;
  color: #666;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-left {
    justify-content: flex-start;
  }

  .header-actions {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .record-item {
    flex-direction: column;
    gap: 16px;
  }

  .record-left {
    flex-direction: column;
  }

  .tutorial-image {
    width: 100%;
    height: 120px;
  }

  .record-center {
    min-width: auto;
  }

  .record-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .section-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-meta {
    flex-wrap: wrap;
  }
}
</style>
